<template>
	<div class="wrap">
		<div class="page-title">
			<h3> 诊断工具 </h3>
		</div>
		<div class="table-wrap">
			<div class="btns">
					<button class="button button--aylen" :class="type=='ping'?'btn-active':'btn-unactive'" @click="chageType('ping')">Ping</button>      
					<button class="button button--aylen" :class="type=='trace'?'btn-active':'btn-unactive'"  @click="chageType('trace')">TraceRoute</button>       
			</div>
		  <ping v-if="type=='ping'" v-on:traceRoutePage='traceRoutePage' 	:pingResult='pingResult' v-on:diagnose='diagnose'></ping>
		  <traceRoute v-else v-on:pinkPage='pinkPage'  v-on:diagnose='diagnose' :traResult='traResult'></traceRoute>
	  </div>
		<noticeModal :id ="'modal'" :title ="'提示'" :status = "'error'" :errorMsg="errorMessage" ></noticeModal>
	</div>
</template>
<script>
	 import SystemService from 'services/systemService'
	 import ping from './diagnose/ping'
	 import traceRoute from './diagnose/traceRoute'
	 import noticeModal from 'components/common/noticeModal'
	 export default{
		components: {
			ping,
			traceRoute,
			noticeModal,
		},
		data() {
			return{
				type:'ping',
				pingResult:[],
				traResult:[],
				result:'',
				interval:'',
				errorMessage:''
			}
		},
		methods:{
			getErrorMsg(msg) {
					this.errorMsg = msg
			},
			chageType(type) {
				this.type=type
			},
			pinkPage(msg) {
				this.flag=msg
				this.traResult=[]
				this.pingResult=[]
				$(".rotate").hide()
				clearInterval(this.interval)
			},
			traceRoutePage(msg) {
				this.flag=msg
				this.traResult=[]
				this.pingResult=[]
				$(".rotate").hide()
				clearInterval(this.interval)
			},
			currentGet(params) {
				SystemService.getNetDiagnose(params)
				.then((waitres) => {
					waitres = JSON.parse(waitres)
					if (waitres.errcode === 0) {
						if (params.oper=='waitping') {
							this.pingResult=waitres.data
							$('#pinkScroll').scrollTop( $('#pinkScroll')[0].scrollHeight );
							this.traResult=[]
						} else {
							this.traResult=waitres.data
							$('#tracerouteScroll').scrollTop( $('#tracerouteScroll')[0].scrollHeight )
							this.pingResult=[]
						}
						clearTimeout(this.interval)
						this.interval = setTimeout(() => this.currentGet(params), 1000)
					} else {
						$(".rotate").hide()
						clearInterval(this.interval)
					}
				},()=>{
				clearTimeout(this.interval)
				this.interval = setTimeout(() => this.currentGet(params), 1000)
			})
			},
			diagnose(msg) {
				this.result=''
				let params={}
				if (msg.type=='ping') {
					params.oper=msg.type
					params.ip=msg.ip
					params.length=msg.length
					params.times=msg.times
				} else {
					params.oper=msg.type
					params.min_ttl=msg.min_ttl
					params.max_ttl=msg.max_ttl
					params.ip=msg.ip
				}
				SystemService.getNetDiagnose(params)
					.then((res) => {
						
						if (res.errcode === 0) {
							$(".rotate").show()
							if (msg.type=='ping') {
								params.oper='waitping'
								this.currentGet(params)
							} else {
								params.oper='waittraceroute'
								this.currentGet(params)
							}
						} else {
							this.errorMessage=res.errorMessage
							$("#modal").modal("show")
						}
					},()=>{
						$("#modal").modal("show")
						this.errorMessage = "请求超时"
					})
			}	
		},
		beforeDestroy() {
			$(".rotate").hide()
			clearInterval(this.interval)
		}
	 }
</script>
<style lang="less" scoped>
	.btns{
		margin-bottom: 10px;
	}
	button{
		border-radius: 3px;
		height: 20px;
		padding:0 20px;     
  }
	.wrap {
		margin: 30px 0 0 30px;
		padding-bottom: 10px;
		background: #FFFFFF;
	}
	.table-wrap{
		padding: 20px;
	}
</style>
